<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画图片</title>
    <style type="text/css">
        #box{
            width: 700px;
            height: 800px;
            margin: 0 auto;
            border: 1px solid green;
            perspective: 1200px;
            -webkit-perspective: 1200px;
            -moz-perspective: 1200px;
            -ms-perspective: 1200px;
            -o-perspective: 1200px;

            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
            -o-transform-style:preserve-3d;

        }
        img{
            width: 400px;
            height: 582px;
            margin: 30px 120px;
            box-shadow: -7px 10px 10px #333;
            transform: rotateX(60deg) rotateY(3deg) rotateZ(-25deg);
            transition: all 1s ease-out;
        }
        .phone:hover {
            box-shadow:-100px 100px 10px #fff;
            transform: rotate3D(0, 0, 0, 0deg);
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/phone.jpg" alt="" class="phone">
    </div>
</body>
